<template>
	<view>
		<navbar :isback="true" title="付款记录"></navbar>
		<u-sticky bgColor="#fff" v-if="poplist.length>0" customNavHeight="44">
			<view class="tab">
				<u-tabs :list="poplist" lineWidth="118rpx" lineHeight='10rpx' lineColor="#0381FC" :activeStyle="{
				            color: '#1E1E1E',
				            fontWeight: 'bold',
				            transform: 'scale(1.15)'
				        }" :inactiveStyle="{
				            color: '#1E1E1E',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 35rpx; padding-right: 35rpx; height: 50rpx;font-size:26rpx;" @click="clicktab">
				</u-tabs>
			</view>
		</u-sticky>
		<u-loading-page icon-size="100rpx" :loading="loading" loading-text="驼乡生活信息超市"></u-loading-page>
		<view class="" v-if="!loading">
			<view class="list" v-if="list.length>0">
				<view class="list__item" v-for="(item,index) in list" :key="index" @click="to('/pages/xishi/orderdetail?id='+item.id)">
					<u-icon name="/static/my/qb.png" size="97rpx"></u-icon>
					<view class="list__item__center">
						<view class="list__item__text">
							{{item.name}}
							<!-- 2=集百福,3=弄首歌,4=种棵树,5=定摆件 -->
							<text v-if="item.type==2">【集百福】</text>
							<text v-if="item.type==3">【弄首歌】</text>
							<text v-if="item.type==4">【种棵树】</text>
							<text v-if="item.type==5">【定摆件】</text>
							<text v-if="item.type==6">【散百财】</text>
							<text v-if="item.type==7">【制像章】</text>
						</view>
						<view class="list__item__time">
							{{$u.timeFormat(item.createtime, 'yyyy/mm/dd hh:MM')}}
						</view>
					</view>
					<view class="list__item__value">
						￥{{item.price}}
					</view>
				</view>
			</view>
			<view class="" v-else style="padding-top: 50rpx;">
				<u-empty mode="list" text="暂无记录">
				</u-empty>
			</view>
		</view>
		
		<view class="kf">
			<button class="u-reset-button" open-type="contact">
				<image src="/static/xishi/kf.png" class="kficon" mode=""></image>
			</button>
		</view>
	</view>
</template>

<script>
	import home from '@/api/_home.js'
	export default {
		data() {
			return {
				// ,2=集百福,3=弄首歌,4=种棵树,5=定摆件,6=散百财
				poplist:[
					{name:'集百福',type:2},
					{name:'弄首歌',type:3},
					{name:'种棵树',type:4},
					{name:'定摆件',type:5},
					{name:'散百财',type:6},
					{name:'制像章',type:7},
				],
				list:[],
				loading:true
			};
		},
		methods:{
			clicktab(e){
				this.getlist(e.type)
			},
			getlist(type){
				home.myOrderTypeAdmin({type}).then(res=>{
					if(res.data.code==1){
						this.list=res.data.data
						this.loading=false
					}
				})
			}
		},
		onLoad() {
			this.getlist(2)
		}
	}
</script>

<style lang="scss">
.tab{
	padding: 30rpx 0 20rpx;
}
.list{
	padding: 12rpx 0 0 30rpx;
	border-bottom: 1rpx solid #EEEBEB;
	&__item{
		display: flex;
		align-items: center;
		padding-right: 30rpx;
		border-bottom: 1rpx solid #EEEBEB;
		height: 160rpx;
		&__center{
			flex: 1;
			margin-left: 20rpx;
		}
		&__text{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #1E1E1E;
			line-height: 40rpx;
		}
		&__time{
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #727070;
			line-height: 40rpx;
		}
		&__value{
			font-family: DIN Next LT Pro;
			font-weight: bold;
			font-size: 36rpx;
			color: #1B64F9;
			line-height: 36rpx;
		}
		&:last-child{
			border-bottom: 0;
		}
	}
}
</style>
